<template>
  <div class="micro-image-ad-box">
    <!--预览区-->
    <div class="design-preview-controller">
      <div v-if="formData.imageList.length"
           class="ad-view-box"
           :class="'ad-view-'+formData.indicator">
        <div v-if="formData.indicator ===1">
          <img v-for="(item,index) in formData.imageList"
               :key="index"
               style="display: block"
               :src="item.url"
               alt="">
        </div>
        <div v-for="(item,index) in formData.imageList"
             v-else
             :key="index"
             class="image-ad-view"
             :style="{backgroundImage: `url(${item.url})`}" />
        <div v-if="formData.indicator === 2 && formData.swiperOption.indicatorDots"
             class="ad-po">
          <span :style="{background:formData.swiperOption.indicatorActiveColor}" />
          <span :style="{background:formData.swiperOption.indicatorColor}" />
          <span :style="{background:formData.swiperOption.indicatorColor}" />
        </div>
      </div>
      <div v-else
           class="image-ad-view">
        <div class="image-ad-title">
          {{$t('shopFeature.imageAd.widthSuggest')}}
        </div>
      </div>
    </div>
    <!--编辑区-->
    <div v-show="isShowEdit"
         class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">{{$t('shopFeature.imageAd.imageAd')}}</div>
        <div class="image-ad-edit">
          <div class="ad-edit-item">
            <div class="ad-edit-item-title">
              {{$t('shopFeature.imageAd.selModel')}}
            </div>
            <div class="ad-edit-item-content">
              <div v-for="(item,index) in typeList"
                   :key="index"
                   :class="['item-box-type',{active:index + 1 === formData.indicator}]"
                   @click="changeIndicator(index)">
                <img :src="adPic">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </div>
          <el-form ref="formData"
                   label-width="100px"
                   v-if="formData.indicator === 2">
            <el-form-item :label="$i18n.t('shopFeature.imageAd.isShowDots')">
              <el-switch v-model="formData.swiperOption.indicatorDots"
                         active-color="#13ce66"
                         inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.imageAd.dotsColor')"
                          v-if="formData.swiperOption.indicatorDots">
              <el-color-picker v-model="formData.swiperOption.indicatorColor"
                               show-alpha />
              <el-button class="reColor"
                         @click="formData.swiperOption.indicatorColor='rgba(0, 0, 0, .3)'">{{$t('shopFeature.imageAd.reset')}}</el-button>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.imageAd.actDotColor')"
                          v-if="formData.swiperOption.indicatorDots">
              <el-color-picker v-model="formData.swiperOption.indicatorActiveColor"
                               show-alpha />
              <el-button class="reColor"
                         @click="formData.swiperOption.indicatorActiveColor='#e43130'">{{$t('shopFeature.imageAd.reset')}}</el-button>
            </el-form-item>
          </el-form>
          <p style="margin-top: 20px;">{{$t('shopFeature.imageAd.addPic')}}
            <span style="color:#b7b7b7; margin-left:10px">{{$t('shopFeature.imageAd.max10Ads')}}</span>
          </p>
          <draggable :list="formData.imageList"
                      ghost-class="ghost"
                      handle=".ad-handle">
            <div v-for="(item,index) in formData.imageList"
                  :key="index"
                  class="ad-image-list">
              <div class="ad-image-list-img ad-handle"
                    :style="{backgroundImage:`url(${item.url})`}">
                <p class="re-choose-img"
                    @click="changeImg(index)">{{$t('shopFeature.tabNav.changePic')}}</p>
              </div>
              <div class="ad-image-list-content">
                <div>
                  <div class="ad-image-title">
                    <span>{{$t('shopFeature.imageAd.picTit')}}</span>
                    <el-input v-model="item.imgTit"
                              size="mini"
                              :placeholder="$i18n.t('shopFeature.imageAd.picTit')" />
                  </div>
                  <div class="ad-image-link">
                    <span>{{$t('shopFeature.tabNav.routeLink')}}</span>
                    <el-dropdown trigger="click"
                                  size="small"
                                  @command="command"
                                  class="ad-image-link-dropdown">
                      <div class="cursor color">
                        <span v-if="item.type"
                              class="type-name">{{ item.type | typeNameFilter(that) }}
                            <i class="el-icon-close" @click.stop="resetLink(index)"></i>
                        </span>
                        <span v-else
                              class="type-name">{{$t('shopFeature.tabNav.choose')}}
                        </span>
                      </div>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(linkItem,linkIndex) in linkList"
                                          :key="linkIndex"
                                          :command="({linkItem,index,currentEditIndex:index})">
                          <span style="font-size: 12px;">{{ linkItem.title }}</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <p class="title" v-if="item.title && (item.type===1 || item.type===4)" @click="handleChangeLinkOrProd(index,item.type)">{{item.title}}</p>
                </div>
                <i class="el-icon-error close-icon"
                    @click="formData.imageList.splice(index, 1)" />
              </div>
            </div>
          </draggable>
          <!--选择图片框-->
          <div v-if="10 - formData.imageList.length !== 0"
               class="ad-add-image"
               @click="elxImgboxHandle">
            <p>
              <i class="el-icon-plus" /> {{$t('shopFeature.imageAd.addBgImg')}}
            </p>
            <p style="color: #b7b7b7;">{{$t('shopFeature.imageAd.widthSuggest')}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗, 新增图片 -->
    <elx-imgbox ref="elxImgbox"
                @refreshPic="refreshPic"
                :maxSize="10"
                :imgSizeLimit="false"></elx-imgbox>
    <!-- 商品选择弹窗  -->
    <prods-select v-if="dialogChooseGoods"
                  ref="ProdsSelect"
                  :isSingle="true"
                  @refreshSelectProds="chooseGoodsFun"></prods-select>
    <!--选择微页面-->
    <el-dialog custom-class="up-dialog"
               :close-on-click-modal="false"
               top="5vh"
               :title="$i18n.t('shopFeature.tabNav.microPage')"
               :visible.sync="dialogChoosePages"
               width="42%">
      <div class="choose-goods-compent">
        <choose-feature :isGetChooseData="isGetChooseFeature"
                        @chooseChooseFeaturesFun="chooseChooseFeaturesFun"></choose-feature>
        <div slot="footer"
             style="text-align: right;margin-top: 20px;">
          <el-button size="mini"
                     type="primary"
                     @click="isGetChooseFeature=!isGetChooseFeature">{{$t('shopFeature.tabNav.confirm')}}</el-button>
          <el-button size="mini"
                     @click="dialogChoosePages = false">{{$t('shopFeature.tabNav.cancel')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗: 输入自定义路径 -->
    <el-dialog custom-class="up-dialog" :title="$i18n.t('shopFeature.tabNav.customPath')" width="40%" top="30vh" :visible.sync="showPathInputDialog">
      <div class="custom-path-con">
        <span>{{$t('shopFeature.tabNav.routeLink')}}</span>
        <el-input style="margin-rigth: 10px;" :placeholder="$i18n.t('shopFeature.tabNav.pleaseFillThePath')" size="small" v-model="customPath">

        </el-input>
      </div>
      <div slot="footer" style="text-align: right;">
          <el-button size="mini"
                     type="primary"
                     @click="customPathComfirm">{{$t('shopFeature.tabNav.confirm')}}</el-button>
          <el-button size="mini"
                     @click="customPathCancel">{{$t('shopFeature.tabNav.cancel')}}</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
